<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<script src="js/jquery.min.js"></script>
		<style>
			.main{
				width: 300px;
				height: 100px;
				border: 1px solid red;
			
			}
			.item1{
				width: 300px;
				height: 100px;
				border: 1px solid black;
				
			}
			.item2{
				width: 300px;
				height: 100px;
				border: 1px solid green;
				
			}

		</style>
	</head>
	
	
	
	<body>
		<!-- 在页面加载dom元素之前执行这个js函数,当这个js函数执行之后才会加载dom元素 -->
		<script>
			alert("ss")
		</script>
		
		
		<div class="main">
			<div class="item1">item1
			<button class="item1-btn" type="button">item1</button>
			</div>
			<div class="item2">item2
			<button class="item2-btn" type="button">item2</button></div>

		</div>
		<button class="sentmsg" type="button">发送短信</button>
	
	<script>
		$(function(){
			$(".item2").hide();
			$(".item1-btn").click(function(){
				$(".item1").slideToggle(500)
				$(".item2").slideToggle(500)
			})
			$(".item2-btn").click(function(){
				$(".item2").slideToggle(500)
					$(".item1").slideToggle(500)
			})
			// 监听页面窗口大小变化的函数
			$(window).resize(function(){
			console.log("窗口大小发生了变化");
			// 当前窗口的宽度
			console.log(window.innerWidth);
			// 当前窗口的高度
			console.log(window.innerHeight)
			})
		
		//通过定时器设计一个定时发送短信的按钮
			function timer(time){
				time=time-1;
				$(".sentmsg").html(time+"s");
				if(time>=1){					
					setTimeout(function(){				
					timer(time);
					},1000)
				}
				else{
			 		$(".sentmsg").text("点击再次发送短信")
					  $(".sentmsg").removeAttr("disabled");
				}
				
			
			}
			$(".sentmsg").click(function(){
				
				$(".sentmsg").prop("disabled","true")
				timer(60);
			})
		})
	</script>	
		
	</body>
</html>
